<template>
    <div class="filter-container">
        <!-- 类别筛选 -->
        <div class="filter-group" v-if="items.length !== 0">
            <h3 class="filter-title">
                <img src="/icon/science/year.png" alt="" />
                一级分类：
            </h3>
            <div class="filter-options">
                <button v-for="category in items" :key="category.id" class="filter-btn"
                    :class="{ active: selectedCategory === category.routerPath }" @click="handleCategory(category)">
                    {{ category.name }}
                </button>
            </div>
        </div>
        <div class="filter-group" v-if="secondCategory.length !== 0">
            <h3 class="filter-title">
                <img src="/icon/science/type.png" alt="" />
                二级分类：
            </h3>
            <div class="filter-options">
                <button v-for="item in secondCategory" :key="item.id" class="filter-btn"
                    :class="{ active: secondSelectedCategory === item.routerPath }"
                    @click="handleSecondCategory(item)">
                    {{ item.name }}
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    items: {
        type: Array,
        required: true
    }
})

const selectedCategory = ref('') //当前一级分类
const secondCategory = ref([]) //二级分类
const secondSelectedCategory = ref('') //当前二级分类
const emit = defineEmits(['change'])

watch(() => props.items, (newItems) => {
    if (newItems && newItems.length > 0) {
        selectedCategory.value = newItems[0].routerPath
        secondCategory.value = newItems[0].children
        secondSelectedCategory.value = newItems[0].children[0].routerPath
        emit('change', {
            secondCategory: newItems[0].children[0].id,
            categoryType: selectedCategory.value,  
            secondCategoryType: secondSelectedCategory.value
        })
    }
},
    {
        immediate: true
    }
)

const handleCategory = async (category) => {
    selectedCategory.value = category.routerPath
    secondCategory.value = category.children;   
    secondSelectedCategory.value = category.children[0].routerPath
    emit('change', {
        secondCategory: category.children[0].id,
        categoryType: selectedCategory.value,
        secondCategoryType: secondSelectedCategory.value
    })
}

const handleSecondCategory = async (category) => {
    secondSelectedCategory.value = category.routerPath
    emit('change', {
        secondCategory: category.id,
        categoryType: selectedCategory.value,
        secondCategoryType: secondSelectedCategory.value
    })
}
</script>

<style lang="scss">
.filter-container {
    margin-top: 1rem;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .filter-group {
        margin-bottom: 1.5rem;
        display: flex;
        gap: 16px;

        .filter-title {
            margin: 0;
            min-width: 60px;
            font-size: 1rem;
            color: #666;
            margin-top:.2rem;

            img {
                width: 1.2rem;
                height: 1.2rem;
                vertical-align: -4px;
                margin-right: 5px;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .filter-options {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
    }

    .filter-btn {
        padding: 3px 1rem;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 16px;
        font-size: 1rem;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            border-color: #1867CA;
            color: #1867CA;
        }

        &.active {
            background: #1867CA;
            border-color: #1867CA;
            color: white;
        }
    }
}
</style>